<template>
	<div class="main">
		<div class="header">
			<div class="title">账号数目 </div>
			<div class="改标签lh"><button type="button" @click="zhang">添加账号</button></div>
		</div>
		
		<div class="table">
		<el-table
		  ref="singleTable"
		  :data="tableData"
		  highlight-current-row
		  @current-change="handleCurrentChange"
		  style="width: 100%">
		  <el-table-column
		    type="index"
		    width="50">
		  </el-table-column>
		  <el-table-column
		    property="name"
		    label="账号"
		    width="120">
		  </el-table-column>
		  <el-table-column
		    property="username"
		    label="姓名"
		    width="120">
		  </el-table-column>
		  <el-table-column
		    property="campusname"
		    label="账号">
		  </el-table-column>
		
		  
		    
		  <el-table-column label="编辑账号">
		   <template v-slot:default="scope">
		 
		   <el-button type="text" @click="upForm(scope.row)">修改</el-button>
		
		   </template>
		    </el-table-column>
		
		
		     <el-table-column label="操作">
		    <template v-slot:default="scope">
		 <!-- <el-button type="text" @click="">重置密码</el-button> -->
		  <el-button type="text" @click="removeUserById(scope.row.id)">删除</el-button>
		   </template>
		    </el-table-column>
		
		
		
		
		    
		</el-table>
		</div>
		
		<div class="page">
			<div class="block">
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageForm.page"
      :page-sizes="[1, 5, 10]"
      :page-size="pageForm.psize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageForm.counts">
 </el-pagination>
			  </div>
		</div>
	</div>
	
	<el-dialog title="添加账号" width="70%"  v-model="dialogFormVisible" @close="addReset" >
	 <el-form :model="form" :rules="resetFields1"   @close="addReset" ref="resetFields1" label-width="70px">
	
	<el-form-item label="校区:" :label-width="200" prop="title">
	
	  <el-select v-model="form.title" placeholder="请选择" >
	    <el-option
	      v-for="item in tableData1"
	      :key="item.id"
	      :label="item.title"
				:value="item.id">
	      <span style="float: left">{{ item.title }}</span>
	      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
	    </el-option>
	  </el-select>
	
	</el-form-item>
	
	    <el-form-item label="账号:" :label-width="200" prop="name">
	      <el-input v-model="form.name" autocomplete="off" ></el-input>
	    </el-form-item>
	      <el-form-item label="密码:" :label-width="200" prop="pass">
	      <el-input v-model="form.pass" autocomplete="off" ></el-input>
	    </el-form-item>
	     <el-form-item label="姓名:" :label-width="200" prop="username">
	      <el-input v-model="form.username" autocomplete="off" ></el-input>
	    </el-form-item>
	     <el-form-item label="手机号:" :label-width="200" prop="tel">
	      <el-input v-model="form.tel" autocomplete="off" ></el-input>
	    </el-form-item>
	     <el-form-item label="邮箱:" :label-width="200" prop="email">
	      <el-input type="email" v-model="form.email" autocomplete="off" ></el-input>
	    </el-form-item>
	     <el-form-item label="联系地址:" :label-width="200" prop="city">
	      <el-input v-model="form.city" autocomplete="off" placeholder="请输入联系地址"></el-input>
	    </el-form-item>
	    
	   <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="addUser">{{addAndUpdName}}</el-button>
	  </div>
	  
	  </el-form>

	</el-dialog>
	
	
</template>

<script>
	 export default {
    

    data() {   
        return {
            addAndUpdName: '立即创建',
            form: {
            title: '',
            tel:'',
            name:'',
            username:'',
            pass:'',
            photo:'',
            email:'',
            city:'',
            },
            pageForm:{
                counts:0,
                page:1,
                psize:5,

            },

            tableData:[],
             tableData1:[],

            // 添加账号
           dialogFormVisible :false,

        //添加表单验证规则

         resetFields1:{
               name:[{required:true,message:'请填写姓名',trigger:'blur'},
                 { min: 2, max: 10, message: '长度在 1到 5 个字符',trigger:'blur'}
               ],

                  username:[{required:true,message:'请填写姓名',trigger:'blur'},
                 { min: 2, max: 10, message: '长度在 1到 5 个字符',trigger:'blur'}
               ],


                tel:[{
                  required:true,message:'手机号不能为空',trigger:'blur'},
                  { pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/, message: '手机号格式不正确'}
                    ],

                email:[
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                   
                ],
                  
              city:[{required:true,message:'联系地址不能为空',trigger:'blur'},
                //  { min: 2, max: 10, message: '长度在 1到 5 个字符',trigger:'blur'}
               ],


             },

        }
    },


created(){
    this.getItemList()
    this.getItemList1()
},



    methods: {

//修改

upForm(info){
	for(var i in this.form){
		this.form[i] = info[i]
	}
   this.dialogFormVisible=true
   this.getItemList()
},


    // 添加
   async zhang(){
       this. dialogFormVisible= true
    this.addAndUpdName = '添加'

    },

    addReset(){
    this.$refs.resetFields1.resetFields();
    },

 


  // 点击按钮添加新课程

  async addUser(){
		return console.log(this.form)
    let self =this
    this.$refs.resetFields1.validate( valid=>{
        if(!valid)return
    })

    // 发起添加用户的网络请求
    let token = window.sessionStorage.getItem('token')
    const {data:res} = await self.$http.post('http://www.eshareedu.cn/edusystems/api/company/add',
    self.form);

    if(res.errCode == 10000){
         return  this.dialogFormVisible =false,
        this.getItemList(),
        this.$message.success('添加账号成功')
    }else{
        return  this.dialogFormVisible =false,

        this.$message.error('添加账号失败！')

    }
   

    

    


  },
     
        // 删除
async removeUserById(scope){
  let id =scope
 let self =this
 //弹框询问
const re= await this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=> err)
         
          if(re == 'confirm'){
            let token = window.sessionStorage.getItem('token')
            const {data:ress}= await self.$http.get('http://www.eshareedu.cn/edusystems/api/company/delete?id='+id)
          if(ress.errCode !=='10000'){
            
              this.$message.success('删除用户成功')
              this.getItemList()
              //  return this.$message.info('已取消删除')
              
            }else{

            return this.$message.error('删除用户失败！')
            
             
            }

           

            



          }
       



},

// 添加账号获取校区
getItemList1(){
        let token = window.sessionStorage.getItem('token')
        this.axios.get('http://www.eshareedu.cn/edusystems/api/campus/list',
        {params:this.pageForm}).then((res)=>{
            if(res.data.errCode =="10000"){
                this.tableData1=res.data.data.list
								console.log(res.data.data.list)
                this.pageForm.counts = res.data.data.counts

            }
        })
       
        },



// 列表展示

getItemList(){
        let token = window.sessionStorage.getItem('token')
        this.axios.get('http://www.eshareedu.cn/edusystems/api/company/list',
        {params:this.pageForm}).then((res)=>{
            if(res.data.errCode =="10000"){
                this.tableData=res.data.data.list
                this.pageForm.counts = res.data.data.counts

            }
        })
       
        },

    // 分页

 handleSizeChange(newSize){
   this.pageForm.psize=newSize
   this.getItemList()

  },

// 监听页码值改变的事件
handleCurrentChange(newPage){
  this.pageForm.page=newPage
   this.getItemList()



},

        
    },



}
</script>

<style lang="less" scoped>
	.main{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header{
			height: 60px;
			display: flex;
			align-items: center;
			background-color: white;
			.title{
				width: 100px;
				height: 60px;
				line-height: 60px;
				background-color: #eee;
			}
		}
		.header>div{
			margin-right: 20px;
			text-align: center;
		}
		.page{
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>
